<template>
<div class="card shadow container mt-3" v-if="list">
  <div class="row card mt-2 cot" v-for="post in list" :key="post._id">
      <h4><router-link :to="`/posts/${post._id}/`">{{post.title}}</router-link></h4>
      <div class="down">{{post.createdAt}}</div>
      <div v-if="post.image " class="col-4 ">
            <img :src="post.image.url" :alt="post.title" >
          </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, PropType } from 'vue'
import { PostProps } from '../store'
export default defineComponent({
  name: 'PostList',
  props: {
    list: {
      type: Array as PropType <PostProps[]>,
      required: true
    }

  }

})
</script>

<style>
.cot {
  display: flex;
  justify-content:space-around;
}

</style>
